<%--
  Created by IntelliJ IDEA.
  User: pc
  Date: 2020/11/11
  Time: 10:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/layui/css/layui.css">
    <script src="${pageContext.request.contextPath}/layui/layui.js"></script>
</head>
<body>
<%--form表单 用于添加数据--%>

<%--form表单 用于修改数据--%>


<script type="text/html" id="barDemo">
    {{# if(d.status==0) { }}
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">取消订单</a>

    {{# }else{    }}
    <a class="layui-btn layui-btn-xs layui-btn-disabled " >已处理</a>
    {{# } }}
</script>
<table class="layui-hide" id="test" lay-filter="test"></table>
<table class="layui-hide" id="test1" lay-filter="test1"></table>
<script>


    layui.use(['table','layer','form'], function(){
        var table = layui.table;
        var layer=layui.layer;
        var $=layui.jquery;
        var form=layui.form;
        //隐藏form表单

        var kid=${kid};
        table.render({
            elem: '#test' //id为test的table
            ,url:'${pageContext.request.contextPath}/gerendingdan?kid='+kid   //url 查询数据   所有的客户的数据
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '个人订单'
            //data[{ id:12,name:123}]
            ,cols: [[     //添加数据
                /*{field:'id', title:'ID',fixed: 'left',  sort: true}*/
                ,{field:'name', title:'名字'}
                ,{field:'createtime', title:'下单时间',sort: true}
                ,{field:'price', title:'价格',  sort: true}
                ,{field:'status', title:'状态',  sort: true,templet:function (res) {
                        var f=res.status;
                        if(f==0){
                            return "预定"
                        }else{
                            return "已处理"
                        }
                    }}
                ,{field:'tel', title:'电话',  sort: true}
                ,{field:'tname', title:'房间类型',  sort: true}
                ,{field:'count', title:'数量',  sort: true}
                ,{field:'rzdate', title:'入住时间',  sort: true}
                ,{field:'leavedate', title:'离开时间',  sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}

            ]]
            ,page: true
            ,limit:5
            ,limits:[5,10,15,20]
        });
       /*table.render({
            elem: '#test1' //id为test的table
            ,url:'${pageContext.request.contextPath}/gerendingdans?kid='+kid   //url 查询数据   所有的客户的数据
            ,toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
            ,defaultToolbar: []
            ,title: '个人订单'
            //data[{ id:12,name:123}]
            ,cols: [[     //添加数据
                {field:'id', title:'ID',fixed: 'left',  sort: true}
                ,{field:'name', title:'名字'}
                ,{field:'createtime', title:'下单时间',sort: true}
                ,{field:'price', title:'价格',  sort: true}
                ,{field:'status', title:'状态',  sort: true,templet:function (res) {
                        var f=res.status;
                        if(f==0){
                            return "预定"
                        }else{
                            return "已处理"
                        }
                    }}
                ,{field:'tel', title:'电话',  sort: true}
                ,{field:'roomtype', title:'房间类型',  sort: true}
                ,{field:'count', title:'数量',  sort: true}
                ,{field:'rzdate', title:'入住时间',  sort: true}
                ,{field:'leavedate', title:'离开时间',  sort: true}
                ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}

            ]]
            ,page: true
        });*/


        //监听行工具事件  test  表格的id
        table.on('tool(test)', function(obj){
            //obj 代表 一行的内容
            var data = obj.data; //一行的数据
            //console.log(obj)
            if(obj.event === 'del'){
               $.ajax({
                   url:"/gerendingdanqu"
                   ,type:"post"
                   ,data:{id:data.id}
                   ,success:function (r) {
                        layer.msg("取消成功")
                       table.reload('test',{
                           page:{
                               curr:1
                           }
                       })
                   },error:function () {
                       layer.msg("失败")
                   }
               })
            } else if(obj.event === 'edit'){
                //获得dian'j
                form.val("modify",(data));
                layer.open({
                    title: '修改信息'
                    ,type:1
                    ,area: ['500px', '350px']
                    ,offset: '50px'
                    ,content:$("#updGustForm")
                });
                form.on('submit(formDemo)', function(data){
                    //layer.msg(JSON.stringify(data.field));
                    //1.将获取到到的数据保存到数据库
                    $.ajax({
                        url:"${pageContext.request.contextPath}/qwer?method=add",
                        data:data.field,  //当前表单里面填写的数据{name:'',name1:''}
                        type:"post",

                        success:function(r){
                            layer.closeAll();
                            //刷新一下table
                            table.reload('test',{
                                page:{
                                    curr:1
                                }
                            })

                        },error:function(msg){
                            alert("服务器错误")
                        }

                    })

                    return false;
                });
            }
        });

    });
</script>
</body>
</html>
